<template>
    <div>
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" @click-right="getsearchresult()" fixed
            placeholder>
            <template #title>
                <van-search v-model="keyword" placeholder="请输入搜索关键词" shape="round"
                    :update:model-value="getsearchsuggest()" />
            </template>
            <template #right>
                搜索
            </template>
        </van-nav-bar>
        <div v-show="!ifshowhotsearch">
            <div v-for="(item, index) in searchsuggestarr" class="hotline" @click = gosearchresultshow(item.keyword) :key="index"> {{ item.keyword }}</div>
        </div>
        <div class="a">
            <router-view v-show="ifshowhotsearch"> </router-view>
            <!-- <searchresultshow :resulthreearr="resulthreearr" :keyword="keyword" >
               </searchresultshow> -->
        </div>

    </div>

</template>

<script setup>

import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { hotsearch, searchsuggest, searchresult } from '../../api/discovery'
const keyword = ref('');

let ifshowhotsearch = ref(true)
let ifshowhotsearchresult = ref(false)
let searchsuggestarr = ref()
const router = useRouter()


const onClickLeft = () => {
    // if(ifshowhotsearchresult.value == true){
    //     keyword.value=''
    //     ifshowhotsearchresult.value = false
    // }
    // else{
    //     history.back();
    // }
    keyword.value = ''
    history.back();
}
const getsearchsuggest = async () => {
    if (keyword.value != '') {
        ifshowhotsearch.value = false
        ifshowhotsearchresult.value = false
        let data = await searchsuggest(keyword.value)
        console.log('搜索推荐')
        searchsuggestarr.value = data.result.allMatch
    }
    else {
        ifshowhotsearch.value = true
    }
}

const getsearchresult = async () => {
    if (keyword.value != '') {
        ifshowhotsearch.value = true
       
        ifshowhotsearchresult.value = true
        router.push({
            name: 'searchresultshow',
            query: {
                keyword: keyword.value
            }
        })
    }

}
const gosearchresultshow = (item) => {
    console.log(item)
    keyword.value = item
    setTimeout(()=>{
        router.push({
        name: 'searchresultshow',
        query: {
            keyword: item
        }
    })
    ifshowhotsearch.value = true
    },10)
   
  
}
</script>

<style scoped lang="less">
.a {
    position: relative;
}

.hotline {
    padding: 20px;

    background-color: white;
}
</style>